<template>
	<view class="account-bind-container">
		<view class="account-card">
			<view class="account-title">联系我们</view>
			<view class="account-desc">我们是xxxx棋牌工作室，欢迎联系</view>
			
			<!-- 微信绑定选项 -->
			<view class="bind-item" v-if="!isWechatBound">
				<view class="bind-left">
					<view class="bind-icon-text">微信</view>
					<view class="bind-info">
						<text class="bind-name">微信账号</text>
						<text class="bind-status">未绑定</text>
					</view>
				</view>
				<button class="bind-btn wechat" @click="handleWechatBind">立即绑定</button>
			</view>
			<view class="bind-item" v-else>
				<view class="bind-left">
					<view class="bind-icon-text">微信</view>
					<view class="bind-info">
						<text class="bind-name">微信账号</text>
						<text class="bind-status bound">已绑定</text>
					</view>
				</view>
				<button class="bind-btn bound" disabled>已绑定</button>
			</view>
			
			<!-- 邮箱绑定选项 -->
			<view class="bind-item" v-if="isTemporaryEmail(userInfo.email)">
				<view class="bind-left">
					<view class="bind-icon-text">邮箱</view>
					<view class="bind-info">
						<text class="bind-name">邮箱账号</text>
						<text class="bind-status">未绑定</text>
					</view>
				</view>
				<button class="bind-btn email" @click="navigateToBindEmail">立即绑定</button>
			</view>
			<view class="bind-item" v-else>
				<view class="bind-left">
					<view class="bind-icon-text">邮箱</view>
					<view class="bind-info">
						<text class="bind-name">邮箱账号</text>
						<text class="bind-status bound">已绑定</text>
						<text class="bind-detail">{{userInfo.email}}</text>
					</view>
				</view>
				<button class="bind-btn bound" disabled>已绑定</button>
			</view>
		</view>
		
		<view class="tips-card">
			<view class="tips-title">账号安全提示</view>
			<view class="tips-item">1. 绑定后可以使用任意一种方式登录</view>
			<view class="tips-item">2. 绑定操作不可逆，请谨慎操作</view>
			<view class="tips-item">3. 如有疑问请联系客服处理</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request';
import { getToken, getUserInfo as getLocalUserInfo } from '@/utils/auth';

export default {
	data() {
		return {
			userInfo: {},
			isWechatBound: false,
			loginMethod: ''
		}
	},
	onLoad() {
		// 检查登录状态
		const token = getToken();
		if (!token) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}, 1500);
			return;
		}
		
		// 获取本地用户信息
		const localUserInfo = getLocalUserInfo();
		if (localUserInfo) {
			this.userInfo = localUserInfo;
			
			// 尝试从本地存储判断是否为微信登录
			const email = localUserInfo.email || '';
			if (email.includes('wx_') && email.includes('@temp.com')) {
				this.loginMethod = 'wechat';
				this.isWechatBound = true;
			} else {
				this.loginMethod = 'email';
			}
			
			// 如果明确有wx_openid，也认为是微信绑定了
			if (localUserInfo.wx_openid) {
				this.isWechatBound = true;
			}
		}
		
		// 刷新用户信息
		this.getUserProfile();
	},
	methods: {
		// 刷新用户信息
		async getUserProfile() {
			try {
				const res = await request.get('/api/mobile/user/profile');
				if (res.code === 200) {
					this.userInfo = res.data;
					
					// 判断登录方式和绑定状态
					const email = res.data.email || '';
					const wxOpenid = res.data.wx_openid || '';
					
					// 如果有wx_openid，表示微信已绑定
					if (wxOpenid) {
						this.isWechatBound = true;
					}
					
					// 判断登录方式
					if (email.includes('wx_') && email.includes('@temp.com')) {
						this.loginMethod = 'wechat';
						// 显示微信登录提示
						uni.showToast({
							title: '您当前使用微信登录',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.loginMethod = 'email';
					}
					
					console.log('用户信息:', {
						email: email,
						wxOpenid: wxOpenid ? '已绑定' : '未绑定',
						loginMethod: this.loginMethod,
						isWechatBound: this.isWechatBound
					});
				}
			} catch (error) {
				console.error('获取用户信息失败', error);
			}
		},
		
		// 判断是否为临时邮箱
		isTemporaryEmail(email) {
			if (!email) return true;
			return email.includes('@temp.com');
		},
		
		// 处理微信绑定按钮点击
		async handleWechatBind() {
			try {
				// 获取微信登录code
				const loginRes = await uni.login();
				if (!loginRes.code) {
					uni.showToast({
						title: '获取微信授权码失败',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '绑定中...'
				});
				
				// 调用绑定接口
				await request.post('/api/mobile/user/bind/wechat', {
					wxCode: loginRes.code
				});
				
				uni.hideLoading();
				uni.showToast({
					title: '绑定成功',
					icon: 'success'
				});
				
				// 更新微信绑定状态
				this.isWechatBound = true;
				
				// 刷新用户信息
				this.getUserProfile();
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: error.message || '绑定失败',
					icon: 'none'
				});
			}
		},
		
		// 跳转到绑定邮箱页面
		navigateToBindEmail() {
			uni.navigateTo({
				url: '/pages/bindEmail/bindEmail'
			});
		}
	}
}
</script>

<style lang="scss">
.account-bind-container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.account-card {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.account-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.account-desc {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 40rpx;
}

.bind-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.bind-left {
	display: flex;
	align-items: center;
}

.bind-icon-text {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
	background-color: #f0f0f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #333;
}

.bind-info {
	display: flex;
	flex-direction: column;
}

.bind-name {
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.bind-status {
	font-size: 26rpx;
	color: #ff6b6b;
}

.bind-status.bound {
	color: #4caf50;
}

.bind-detail {
	font-size: 24rpx;
	color: #999999;
	margin-top: 6rpx;
}

.bind-btn {
	padding: 0 30rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	border-radius: 35rpx;
	color: #ffffff;
	background-color: #007aff;
}

.bind-btn.wechat {
	background-color: #07c160;
}

.bind-btn.email {
	background-color: #ff9800;
}

.bind-btn.bound {
	background-color: #cccccc;
}

.tips-card {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tips-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.tips-item {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.8;
	position: relative;
	padding-left: 20rpx;
}
</style> 